﻿<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
	<%@ page session="true" %>
		<!DOCTYPE html>
		<html lang="en">

		<head>
			<meta charset="UTF-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=1600, initial-scale=1.0">
			<title>填写问卷</title>
			<link rel="stylesheet" href="css/link.css">
			<link rel="shortcut icon" href="images/favicon.ico">
		</head>

		<body>
			<div class="nav">
				<a href="#"><img src="images/logo.png" width="130" height="48"></a>
			</div>
			<div class="questions">
				<div class="title">
					<h1>${title}</h1>
				</div>
				<form action="#" method="post">
					<c:forEach items="${questions}" var="question">
						<c:choose>
							<c:when test="${question.type eq 1 }">
								<div class="question">
									<p>${question.orderNumber}.单选题:${question.description}</p>
									<input type="radio" name="${question.orderNumber}" value=""
										unchecked /><span>A.${question.choiceA}</span><br> <input type="radio"
										name="${question.orderNumber}" value=""
										unchecked /><span>B.${question.choiceB}</span><br>
									<input type="radio" name="${question.orderNumber}" value=""
										unchecked /><span>C.${question.choiceC}</span><br> <input type="radio"
										name="${question.orderNumber}" value=""
										unchecked /><span>D.${question.choiceD}</span><br>
								</div>
							</c:when>
							<c:when test="${question.type eq 2 }">
								<div class="question">
									<p>${question.orderNumber}.多选题:${question.description}</p>
									<input type="checkbox" name="${question.orderNumber}" value=""
										unchecked /><span>A.${question.choiceA}</span><br> <input type="checkbox"
										name="${question.orderNumber}" value=""
										unchecked /><span>B.${question.choiceB}</span><br> <input type="checkbox"
										name="${question.orderNumber}" value=""
										unchecked /><span>C.${question.choiceC}</span><br> <input type="checkbox"
										name="${question.orderNumber}" value=""
										unchecked /><span>D.${question.choiceD}</span><br>
								</div>
							</c:when>
							<c:otherwise>
								<div class="question">
									<p>${question.orderNumber}.问答题:${question.description}</p>
									<textarea cols="60" name="${question.orderNumber}" rows="8"
										maxlength="256"></textarea>
								</div>
							</c:otherwise>
						</c:choose>
					</c:forEach>
					<div class="submit">
						<input type="button" id="submit" name="submit" value="提交">
					</div>
				</form>
			</div>
		</body>
		<script src="js/jquery-3.6.0.min.js"></script>
		<script>
			$("#submit").click(
				function () {
					var answers = new Array();
					var flag = 1;
					var index = 0;
					var radios = $("input:radio");
					var checks = $("input:checkbox");
					var texts = $("textarea");
					for (var i = 0; i < radios.length; i++) {
						var order = radios[i].getAttribute("name");
						var exam = 0;
						var A;
						var B;
						var C;
						var D;
						if (radios.eq(i).is(":checked")) {
							A = "true";
							exam = 1;
						} else {
							A = "false";
						}
						i++;
						if (radios.eq(i).is(":checked")) {
							B = "true";
							exam = 1;
						} else {
							B = "false";
						}
						i++;
						if (radios.eq(i).is(":checked")) {
							C = "true";
							exam = 1;
						} else {
							C = "false";
						}
						i++;
						if (radios.eq(i).is(":checked")) {
							D = "true";
							exam = 1;
						} else {
							D = "false";
						}
						if (exam == 0) {
							flag = exam;
						}
						answers[index] = {
							type: 1,
							orderNumber: order,
							answerA: A,
							answerB: B,
							answerC: C,
							answerD: D
						}
						index++;
					}
					for (var i = 0; i < checks.length; i++) {
						var order = checks[i].getAttribute("name");
						var exam = 0;
						var A;
						var B;
						var C;
						var D;
						if (checks.eq(i).is(":checked")) {
							A = "true";
							exam = 1;
						} else {
							A = "false";
						}
						i++;
						if (checks.eq(i).is(":checked")) {
							B = "true";
							exam = 1;
						} else {
							B = "false";
						}
						i++;
						if (checks.eq(i).is(":checked")) {
							C = "true";
							exam = 1;
						} else {
							C = "false";
						}
						i++;
						if (checks.eq(i).is(":checked")) {
							D = "true";
							exam = 1;
						} else {
							D = "false";
						}
						if (exam == 0) {
							flag = exam;
						}
						answers[index] = {
							type: 2,
							orderNumber: order,
							answerA: A,
							answerB: B,
							answerC: C,
							answerD: D
						}
						index++;
					}
					for (var i = 0; i < texts.length; i++) {
						var order = texts[i].getAttribute("name");
						if (!texts.eq(i).val()) {
							flag = 0;
						}
						answers[index] = {
							type: 3,
							orderNumber: order,
							answerA: texts.eq(i).val(),
							answerB: null,
							answerC: null,
							answerD: null
						}
						index++;
					}
					if (flag == 0) {
						alert("提交失败，有题目未回答!");
					} else {
						var param = {
							"answer": JSON.stringify(answers)
						};
						console.log(answers);
						$.post("/query/submit/${questions[0].questionnaireId}",
							param, function (result) {
								if (result == "true") {
									alert("提交成功!");
								} else if (result == "false") {
									alert("提交失败，问卷已关闭!");
								} else {
									alert("提交失败，问卷id已用尽，请与管理员联系!");
								}
							});
					}
				})
		</script>

		</html>